<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    size="default"
  >
    <div
      v-if="dialogVisible"
      class="wechat-reward"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane
          label="红包配置"
          name="config"
        >
          <config-dialog
            :source-id="sourceId"
            :source-type="sourceType"
            @close="dialogVisible = false"
          />
        </el-tab-pane>
        <el-tab-pane
          label="领取记录"
          name="records"
        >
          <receive-list
            v-if="activeTab === 'records'"
            :source-id="sourceId"
            :source-type="sourceType"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import ConfigDialog from "./components/ConfigDialog.vue";
import ReceiveList from "./components/ReceiveList.vue";

const route = useRoute();
const sourceType = "FORM_WX_RAD_PACK";
const sourceId = route.query.key as string;

interface Props {
  visible: boolean;
  title?: string;
  width?: string | number;
}

const activeTab = ref("config");

const props = withDefaults(defineProps<Props>(), {
  title: "微信红包设置",
  width: "50%"
});

const emit = defineEmits(["update:visible", "submit"]);

const dialogVisible = computed({
  get: () => props.visible,
  set: val => emit("update:visible", val)
});

watch(
  () => props.visible,
  () => {
    if (props.visible) {
    }
  }
);
</script>
